<template>
  <section class="mb:8 lg:mb-20 mt-8">
    <div>
      <div
        class="relative grid grid-cols-2 md:grid-cols lg:grid-cols-4 gap-2 lg:gap-7"
      >
        <div
          class="aspect-w-1 aspect-h-1"
          v-for="(item, index) in boxsList"
          :key="item.id"
        >
          <router-link
            :to="`/box?id=${item.id}`"
            class="block text-black-85 w-full bg-no-repeat bg-cover bg-center rounded border-b-4 overflow-hidden shadow-sm cursor-pointer hover:shadow-yellow border-rarities-7"
            :style="`background-image: url('${item.box_banner_images}');`"
          >
            <div class="text-xs sm:text-sm font-bold mt-2 ml-1 mr-[50%]">
              {{ item.box_name }}
            </div>
            <div
              class="inline-block bg-yellow font-bold text-xs sm:text-sm px-2.5 py-1 rounded-sm absolute -right-1 top-2"
            >
              Ł 10.00
            </div>
            <div
              class="bg-black-30 text-xs px-2 lg:px-6 py-0.5 rounded-sm text-white inline-block bottom-2 absolute left-[50%] -translate-x-2/4 whitespace-nowrap"
            >
              855474人已开箱
            </div>
          </router-link>
        </div>
        <!---->
      </div>
    </div>
  </section>
</template>

<script>
export default {
  props: ["boxsList"],
  methods: {},
};
</script>

<style></style>
